<template>
  <div class="left-bottom">
    <div class="left-bottom_head display-flex fd-row jc-space-between">
      <el-button :class="['left-bottom_head_btn', isShow ? 'left-bottom_head_active': '']" @click="onClickBtn">可燃气体检测器1</el-button>
      <el-button :class="['left-bottom_head_btn', !isShow ? 'left-bottom_head_active': '']" @click="onClickBtn">可燃气体检测器2</el-button>
    </div>
    <div class="left-bottom_main mt-20">
      <Echart
        id="leftBottom"
        :options="option"
        class="left_bottom_inner"
        v-if="pageflag"
        ref="charts"
      />
      <Reacquire v-else @onclick="getData" style="line-height: 200px">
        重新获取
      </Reacquire>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShow: true,
      pageflag: false,
      option: {}
    }
  },
  created () {

  },

  mounted () {
    this.getData();
  },
  beforeDestroy () {
  },
  methods: {
    onClickBtn () {
      this.isShow = !this.isShow
    },
    getData () {
      this.pageflag = true;
      const res = {
        success: true,
        data: {
          dataList: [
            '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00'
          ],
          aList: [1.20, 1.32, 1.01, 1.34, 0.90, 2.30, 2.10],
          bList: [1.30, 1.22, 1.11, 1.44, 1.20, 2.10, 1.90]
        }
      }
      if (res.success) {
        this.init(res.data.dataList, res.data.aList, res.data.bList)
      } else {
        this.pageflag = false;
      }
    },

    init (xData, yData, yData2) {
      this.option = {
        color: ['#3778D1', '#EFBA55 '],
        legend: {
          icon: 'circle',
          textStyle: {
            color: '#ffffff'
          },
          data: ['一氧化碳', '甲烷']
        },
        xAxis: {
          type: 'category',
          data: xData,
          boundaryGap: false, // 不留白，从原点开始
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(31,99,163,.2)'
            }
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: 'rgba(31,99,163,.1)'
            }
          },
          axisLabel: {
            color: '#7EB7FD',
            fontWeight: '500'
          }
        },
        yAxis: {
          type: 'value',
          max: 10, // 最大值
          min: 0, // 最小值
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(31,99,163,.2)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(31,99,163,.1)'
            }
          },
          axisLabel: {
            color: '#7EB7FD',
            fontWeight: '500'
          }
        },
        title: {
          subtext: '单位：ppm',
          subtextStyle: { // 设置二级标题的样式
            color: '#7EB7FD'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(17, 43, 107, 1)',
          borderColor: '#fff',
          textStyle: {
            color: '#FFF'
          },
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0; i < params.length; i++) {
              relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + 'ppm'
            }
            return relVal
          }
        },
        grid: {
          // 布局
          x: 50,
          y: 50,
          x2: 30,
          y2: 30
        },
        series: [
          {
            data: yData,
            name: '一氧化碳',
            type: 'line',
            smooth: true
            // stack: 'Total'
          },
          {
            data: yData2,
            name: '甲烷',
            type: 'line',
            smooth: true
            // stack: 'Total'
          }
        ]
      };
    }
  }
}
</script>
<style lang="scss" scoped>
.left-bottom{

  .left-bottom_head{
    .left-bottom_head_btn{
      width: 50%;
      background: RGBA(3, 35, 102, 0.4);
      color:#8192B3;
      border: 1px solid rgba(30, 169, 222, .3);
    }
    .left-bottom_head_btn:hover{
      color: #fff;
      box-shadow: rgba(30, 169, 222, .6) 0px 0px 25px 3px inset;
    }
    .left-bottom_head_active{
      color: #fff;
      box-shadow: rgba(30, 169, 222, .6) 0px 0px 25px 3px inset;
      border:1px solid rgba(30, 169, 222,1);
    }
  }
  .left-bottom_main{
    height: 350px;
  }
}
</style>
